<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="/static/css/app.css">
    <title>Hello, world!</title>
</head>
<style>
    .hidden {
        display: none;
    }
    
    .jumbotron {
        overflow: auto;
    }
    
    iframe {
        background: #e9ecef;
        width: 100%;
        height: 100%;
    }
    
    #container {
        height: 900px;
        min-height: 900px;
    }
    
    .iframe {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        padding: 0 15px;
        z-index: 99;
    }
    
    .iframe .box {
        width: 100%;
        height: 100%;
        border-radius: 5px;
        overflow: hidden;
    }
    
    img {
        border-radius: 50%;
    }
</style>

<body>
    <div id="app">
        <div class="container-fluid" id="container">
            <div class="row" style="height: 100%;">
                <!-- <div class="col-sm-2">
                    <div class="jumbotron" style="margin:0;height: 100%;">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item" v-for="item in userlist" style="background:none;"> <span v-text="item.nickname"></span> / <span v-text="item.account"></span>
                            </li>
                        </ul>
                    </div>
                </div> -->
                <!-- <div class="col-sm-12" style="padding-left:0"> -->
                <div class="col-sm-12">
                    <div class="row">
                        <div class="col-sm">
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    {volist name="app" id="vo"} {neq name="vo.link" value=""}
                                    <li class="breadcrumb-item active" aria-current="page" onclick="show(this)" data-id="iframe{$vo.id}" style="cursor: pointer;">{$vo.app_name}</li>
                                    {/neq} {/volist}
                                </ol>
                            </nav>
                        </div>
                    </div>
                    <div class="row" style="height: calc(100% - 63px);position: relative;">
                        <div>
                            {volist name="app" id="vo"}
                            <!--  -->
                            {neq name="vo.link" value=""}
                            <div class="hidden iframe{$vo.id} iframe">
                                <div class="box"><iframe src="{$vo.link}" frameborder="0"></iframe></div>
                            </div>
                            {/neq}
                            <!--  -->
                            {/volist}
                        </div>
                        <div class="col-sm" style="padding-right:0">
                            <div class="jumbotron" style="margin:0;height: 100%;">
                                <ul class="list-group list-group-flush">
                                    {volist name="app" id='vo'}
                                    <li class="list-group-item" v-for="item in applist" style="background:none;">
                                        <img src="{$vo.icons}" alt="" width="30" height="30">
                                        <span>{$vo.app_name}</span></li>
                                    {/volist}
                                </ul>
                            </div>
                        </div>
                        <div class="col-sm" style="padding-right:0">
                            <div class="jumbotron" style="margin:0;height: 100%;">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item" v-for="(item,index) in userlist" style="background:none;">
                                        <span v-text='index'></span>
                                        <div v-for="i in item" style="padding-left:20px;">
                                            <a :href="'/users/users?id='+i.id"><span v-text="i.nickname"></span>
                                                <span v-text="i.account"></span></a>
                                        </div>

                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-sm" style="padding-right:0">
                            <div class="jumbotron" style="margin:0;height: 100%;">
                                <ul class="list-group list-group-flush" v-if="companylist&&companylist.length > 0">
                                    <li class="list-group-item" v-for="item in companylist" style="background:none;"> <span v-text="item.company_name"></span></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-sm">
                            <div class="jumbotron" style="margin:0;height: 100%;">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item" v-for="item in departmentlist" style="background:none;"> <span v-text="item.department_name"></span></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-sm" style="padding-left:0">
                            <div class="jumbotron" style="margin:0;height: 100%;">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item" v-for="item in positionlist" style="background:none;"> <span v-text="item.position_name"></span>
                                        <div style="padding-left:20px;height:50px;line-height:50px;" v-for="i in item.children"> <span v-text="i.position_name"></span></div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <!-- <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                applist: [{
                    'name': '人力资源系统'
                }],
                userlist: [],
                companylist: [],
                departmentlist: [],
                positionlist: [],
                headers: {
                    'token': "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiIsImp0aSI6Im1kZC00ZjFnMjNhMTJhYSJ9.eyJpc3MiOiJodHRwOlwvXC93d3cuaGxqbWRkLmNuIiwiYXVkIjoiaHR0cDpcL1wvd3d3Lmhsam1kZC5jbiIsImp0aSI6Im1kZC00ZjFnMjNhMTJhYSIsImlhdCI6MTU5Nzg4MjkwNSwiZXhwIjoxNjAwNDc0OTA1LCJ1aWQiOjN9.w-wmJ7k2Fdg5yM_74zzcpzL_ZtNfs6Cqrj_NmWNrDkc",
                    "accessToken": "N0IyMjY5NjQyMjNBMzEyQzIyNjE3MDcwNUY2OTY0MjIzQTIyMzI2OTM2.MzczMzY3NjQ2NjM2Njg3OTc0NkQ2QTM2NzUyMjJDMjI2MTcwNzA1Rjcz.NjU2MzcyNjU3NDIyM0EyMjc3NjM1NjdBNzg0ODQyNEQ0NDc3NzQ0RjdB.NkU2MjRENkQ0QTU4NTM2NTZBN0E2NTRDNTc3MzQxNjg2MTY4NjYyMjdE.YTFiNTBhNzNlNGU0Y2RlMjM0YTI4MDU5ODExY2RkY2U1ZjNjYjc2YTZiM2My",
                    "Content-Type": "text/plain;charset=UTF-8"
                }
            },
            mounted() {
                this.getData();
            },
            methods: {
                getData() {
                    //员工
                    axios.get("{:url('users/index')}", {
                        params: {
                            type: 'all'
                        },
                        headers: this.headers
                    }).then(resp => {
                        this.userlist = resp.data.data
                    }).catch(resp => {});
                    //部门
                    axios.get("{:url('department/index')}", {
                        params: {},
                        headers: this.headers
                    }).then(resp => {
                        this.departmentlist = resp.data.data
                    }).catch(resp => {});
                    //公司
                    axios.get("{:url('company/index')}", {
                        params: {},
                        headers: this.headers
                    }).then(resp => {
                        this.companylist = resp.data.data
                    }).catch(resp => {});
                    //职位
                    axios.get("{:url('position/index')}", {
                        params: {},
                        headers: this.headers
                    }).then(resp => {
                        this.positionlist = resp.data.data
                    }).catch(resp => {});
                }
            }
        })



        function show(e) {
            var id = $(e).data('id');
            $('.' + id).siblings().hide();
            $('.' + id).toggle('hidden');

        }
        var winheight = document.documentElement.clientHeight;
        $('#container').css({
            'height': winheight - 0 + 'px',
            'minHeight': winheight - 0 + 'px',
            'overflow': 'auto',
            'paddingBottom': '20px',
            'paddingTop': '20px',
        });
        // $('#kaoqin_li').click(function() {
        //     $('#taobao,#baidu').hide();
        //     $('#kaoqin').toggle('hidden');
        // })
        // $('#baidu_li').click(function() {
        //     $('#kaoqin,#taobao').hide();
        //     $('#baidu').toggle('hidden');
        // })

        // 获取应用凭证
        // $.get("{:url('auth/accessToken')}?appId=2i673gdf6hytmj6u&appSecret=wcVzxHBMDwtOznbMmJXSejzeLWsAhahf", function(res) {
        //     console.log(res.accessToken);
        // })

        // var headers = {
        //     'token': "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiIsImp0aSI6Im1kZC00ZjFnMjNhMTJhYSJ9.eyJpc3MiOiJodHRwOlwvXC93d3cuaGxqbWRkLmNuIiwiYXVkIjoiaHR0cDpcL1wvd3d3Lmhsam1kZC5jbiIsImp0aSI6Im1kZC00ZjFnMjNhMTJhYSIsImlhdCI6MTU5NzgxNTY5NSwiZXhwIjoxNjAwNDA3Njk1LCJ1aWQiOjN9.-_infeMVfikktWl-HNpYRmSwn2H5JXLKbZ1IlqFIFkc",
        //     "accessToken": "N0IyMjY5NjQyMjNBMzEyQzIyNjE3MDcwNUY2OTY0MjIzQTIyMzI2OTM2.MzczMzY3NjQ2NjM2Njg3OTc0NkQ2QTM2NzUyMjJDMjI2MTcwNzA1Rjcz.NjU2MzcyNjU3NDIyM0EyMjc3NjM1NjdBNzg0ODQyNEQ0NDc3NzQ0RjdB.NkU2MjRENkQ0QTU4NTM2NTZBN0E2NTRDNTc3MzQxNjg2MTY4NjYyMjdE.YTFiNTBhNzNlNGU0Y2RlMjM0YTI4MDU5ODExY2RkY2U1ZjNjYjc2YTZiM2My",
        //     "Content-Type": "text/plain;charset=UTF-8"
        // };

        // $.ajax({
        //     type: 'GET',
        //     url: "{:url('company/index')}",
        //     headers: headers,
        //     success: function(data, status, xhr) {
        //         app.companylist = data.data
        //         if (data.code == 400) {
        //             top.location.href = "{:url('/login')}";
        //         }
        //     }
        // })
    </script>
    <!-- {include file="index/socket" /} -->
</body>

</html>